<template>
  <div class="p-6">
    <a-tabs v-model:value="activeTab">
      <a-tab-pane key="basic" tab="基础信息">
        <a-form :model="basicSettings" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="系统名称">
            <a-input v-model:value="basicSettings.name" placeholder="请输入系统名称" />
          </a-form-item>
          <a-form-item label="版本号">
            <a-input v-model:value="basicSettings.version" placeholder="请输入版本号" />
          </a-form-item>
          <a-form-item label="Logo URL">
            <a-input v-model:value="basicSettings.logo" placeholder="请输入Logo URL" />
          </a-form-item>
        </a-form>
      </a-tab-pane>

      <a-tab-pane key="mail" tab="邮件配置">
        <a-form :model="mailSettings" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="SMTP 服务器">
            <a-input v-model:value="mailSettings.smtpHost" placeholder="请输入SMTP服务器" />
          </a-form-item>
          <a-form-item label="端口">
            <a-input-number v-model:value="mailSettings.port" :min="1" :max="65535" />
          </a-form-item>
          <a-form-item label="用户名">
            <a-input v-model:value="mailSettings.username" />
          </a-form-item>
          <a-form-item label="密码">
            <a-input-password v-model:value="mailSettings.password" />
          </a-form-item>
          <a-form-item label="启用SSL">
            <a-switch v-model:checked="mailSettings.ssl" />
          </a-form-item>
        </a-form>
      </a-tab-pane>

      <a-tab-pane key="security" tab="安全设置">
        <a-form :model="securitySettings" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="允许登录失败次数">
            <a-input-number v-model:value="securitySettings.maxLoginAttempts" :min="1" />
          </a-form-item>
          <a-form-item label="密码复杂度">
            <a-select v-model:value="securitySettings.passwordPolicy" style="width: 200px">
              <a-select-option value="low">低</a-select-option>
              <a-select-option value="medium">中</a-select-option>
              <a-select-option value="high">高</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="启用多因素认证">
            <a-switch v-model:checked="securitySettings.mfaEnabled" />
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>

    <div class="mt-4">
      <a-button type="primary" @click="saveSettings">保存</a-button>
      <a-button class="ml-2" @click="resetSettings">重置</a-button>
      <a-button class="ml-2" type="dashed" @click="testConnection">测试连接</a-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('basic')

// 模拟系统设置数据
const basicSettings = ref({
  name: '企业管理系统',
  version: '1.0.0',
  logo: ''
})

const mailSettings = ref({
  smtpHost: '',
  port: 25,
  username: '',
  password: '',
  ssl: false
})

const securitySettings = ref({
  maxLoginAttempts: 5,
  passwordPolicy: 'medium',
  mfaEnabled: false
})

// 操作方法
function saveSettings() {
  console.log('保存系统设置：', {
    basic: basicSettings.value,
    mail: mailSettings.value,
    security: securitySettings.value
  })
}

function resetSettings() {
  basicSettings.value = { name: '企业管理系统', version: '1.0.0', logo: '' }
  mailSettings.value = { smtpHost: '', port: 25, username: '', password: '', ssl: false }
  securitySettings.value = { maxLoginAttempts: 5, passwordPolicy: 'medium', mfaEnabled: false }
}

function testConnection() {
  console.log('测试邮件/接口连接...')
}
</script>
